<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>你干嘛~~看我作业</title>
    <link rel="stylesheet" href="./codebase/css/style.css" />
    <link rel="shortcut icon" href="./codebase/image/bitbug_favicon.ico" />
  </head>

  <body>
    <div class="container">
      <!-- HTML & CSS 部分 -->
      <div class="card">
        <div class="logo">
          <img
            src="./codebase/image/CSS.png"
            alt=""
            style="width: 220px; height: 120px"
          />
        </div>
        <div class="content">
          <h2>01</h2>
          <h3>HTML & CSS</h3>
          <p>Try and try until you succeed.</p>
          <button class="btn">
            <a href="./March/0304-weekend01/电影购票布局.html" target="_blank"
              >电影购票布局</a
            >
          </button>
          <button class="btn">
            <a href="./March/0306-定位/太极八卦图.html" target="_blank">太极</a>
          </button>
          <button class="btn">
            <a href="./March/0308-精灵图/day08作业.html" target="_blank"
              >精灵图</a
            >
          </button>
          <button class="btn">
            <a href="./March/0309-形变过渡动画/heartbeat.html" target="_blank"
              >跳动爱心</a
            >
          </button>
          <button class="btn">
            <a href="./March/0309-形变过渡动画/rocket.html" target="_blank"
              >火箭</a
            >
          </button>
          <button class="btn">
            <a href="./March/0311-weekend02/Xiaomi.html" target="_blank"
              >小米(弹性)</a
            >
          </button>
          <button class="btn">
            <a href="./March/0315-静态页面布局/index.html" target="_blank"
              >鼎搜网</a
            >
          </button>
          <button class="btn">
            <a href="./flower-order/index.html" target="_blank">订花乐</a>
          </button>
        </div>
      </div>
      <!-- JavaScript 部分 -->
      <div class="card">
        <div class="logo">
          <img
            src="./codebase/image/JS.png"
            alt=""
            style="width: 120px; height: 120px"
          />
        </div>
        <div class="content">
          <h2>02</h2>
          <h3>JavaScript</h3>
          <p>Try and try until you succeed.</p>
          <button class="btn">
            <a href="./April/0418-DOM操作(1)/countDown.html" target="_blank"
              >五一倒计时</a
            >
          </button>
          <button class="btn">
            <a href="./April/0420-DOM操作(2)/表格渲染.html" target="_blank"
              >表格渲染</a
            >
          </button>
          <button class="btn">
            <a href="./April/0420-DOM操作(2)/网页渲染.html" target="_blank"
              >网页渲染</a
            >
          </button>
          <button class="btn">
            <a href="./April/0423-DOM补充/选项卡.html" target="_blank"
              >选项卡</a
            >
          </button>
          <button class="btn">
            <a href="./April/0424-BOM/rocket.html" target="_blank">火箭返顶</a>
          </button>
          <button class="btn">
            <a href="./April/0426-DOM案例/购物车.html" target="_blank"
              >购物车</a
            >
          </button>
          <button class="btn">
            <a href="./April/0426-DOM案例/滚动动画.html" target="_blank"
              >滚动动画</a
            >
          </button>
          <button class="btn">
            <a href="./April/0426-DOM案例/百叶窗.html" target="_blank"
              >百叶窗</a
            >
          </button>
          <button class="btn">
            <a href="./April/0426-DOM案例/轮播图.html" target="_blank"
              >轮播图</a
            >
          </button>
          <button class="btn">
            <a href="./April/0501-五一作业/购物车.html" target="_blank"
              >五一作业</a
            >
          </button>
          <button class="btn">
            <a href="./April/0504-正则/正则作业.html" target="_blank"
              >正则作业</a
            >
          </button>
          <button class="btn">
            <a href="./April/0505-函数的this指向/作业.md" target="_blank"
              >函数this指向</a
            >
          </button>
          <button class="btn">
            <a href="./April/0506-DOM练习/富豪榜.html" target="_blank"
              >富豪榜</a
            >
          </button>
        </div>
      </div>
      <!-- Vue 部分 -->
      <div class="card">
        <div class="logo">
          <img
            src="./codebase/image/vue2.png"
            alt=""
            style="width: 170px; height: 140px"
          />
        </div>
        <div class="content">
          <h2>03</h2>
          <h3>Vue</h3>
          <p>Try and try until you succeed.</p>
          <button class="btn"><a href="#">还没学</a></button>
        </div>
      </div>
    </div>
    <script src="./vanilla-tilt.js"></script>
    <script>
      // vanilla-tilt.js是一个平滑的3D倾斜JS库
      VanillaTilt.init(document.querySelectorAll('.card'), {
        max: 15, //最大倾斜度数
        speed: 400, //倾斜转换的速度
        glare: true, //是否开启眩光效果
        'max-glare': 1, //最大眩光的不透明度
      });
    </script>
  </body>
</html>
